<template>
  <div style="background-color: #f0f8ff;">
    <div style="margin-bottom: 50px;">
      <span :style="{ color: colorMap['取件任务'] }" @click="changeColor('取件任务')" style="margin-right: 15px;">取件作业</span>
      <el-divider direction="vertical"></el-divider>
      <span :style="{ color: colorMap['派件任务'] }" @click="changeColor('派件任务')" style="margin-right: 15px;">派件作业</span>
      <el-divider direction="vertical"></el-divider>
      <span :style="{ color: colorMap['已取消'] }" @click="changeColor('已取消')">已取消</span>
    </div>
    <div style="margin-bottom: 50px;">
      <el-form ref="form" :model="formData" label-width="120px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="运单编号:" prop="trackingNumber" label-width="100px" label-position="right">
              <el-input v-model="formData.trackingNumber" placeholder="请输入运单编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="快递员姓名:" prop="courierName" label-width="100px" label-position="right">
              <el-input v-model="formData.courierName" placeholder="请输入快递员姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
<!--            <el-form-item label="发件人地址:" prop="province" label-width="100px" label-position="right">
              <el-cascader v-model="formData.address" :options="options" placeholder="请选择省/市/区"></el-cascader>
            </el-form-item>-->
            <span style="margin-left: 40px; margin-right: 20px;">发件人地址：</span>
            <el-select v-model="OrderDto.senderProvinceId" placeholder="请选择省份" clearable @change="handleSenderProvinceChange" :style="{ width: '70px', marginRight: '20px' }">
              <el-option v-for="province in senderprovinces" :key="province.id" :label="province.name" :value="province.id"></el-option>
            </el-select>
            <el-select v-model="OrderDto.senderCityId" placeholder="请选择城市" clearable @change="handleSenderCityChange" :style="{ width: '70px', marginRight: '20px' }">
              <el-option v-for="city in sendercities" :key="city.id" :label="city.name" :value="city.id"></el-option>
            </el-select>
            <el-select v-model="OrderDto.senderDistrictId" placeholder="请选择区域" clearable :style="{ width: '70px' }">
              <el-option v-for="district in senderdistricts" :key="district.id" :label="district.name" :value="district.id"></el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="发件人姓名:" prop="senderName" label-width="100px" label-position="right">
              <el-input v-model="formData.senderName" placeholder="请输入发件人姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="作业状态:" prop="status" label-width="100px" label-position="right">
              <el-select v-model="formData.statusRemark" placeholder="请选择">
                <el-option label="待执行" value="待执行"></el-option>
                <el-option label="进行中" value="进行中"></el-option>
                <el-option label="待确认" value="待确认"></el-option>
                <el-option label="已完成" value="已完成"></el-option>
                <el-option label="已取消" value="已取消"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="query">查询</el-button>
              <el-button type="primary" @click="resetValues">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="table-container" style="margin-bottom: 50px;">
      <el-button type="primary"  @click="allocation">确认订单</el-button>
      <el-table
        :data="expressList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        style="width: 100%"
        max-height="250"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="pickupTaskNumber" type="selection" width="55" ></el-table-column>
        <el-table-column prop="id" label="序号" width="200"></el-table-column>
        <el-table-column prop="pickupTaskNumber" label="取件作业编号" width="200"></el-table-column>
        <el-table-column prop="trackingNumber" label="运单编号" width="200"></el-table-column>
        <el-table-column prop="distributionStatus" label="快递分配状态" width="200"></el-table-column>
        <el-table-column prop="orderTime" label="下单时间" width="200"></el-table-column>
        <el-table-column prop="statusRemark" label="作业状态" width="200"></el-table-column>
        <el-table-column prop="courierName" label="快递员姓名" width="200"></el-table-column>
        <el-table-column prop="senderName" label="发件人姓名" width="200"></el-table-column>
        <el-table-column prop="senderPhone" label="发件人电话号码" width="200"></el-table-column>
        <el-table-column prop="senderAddress" label="发件人地址" width="250"></el-table-column>
        <el-table-column prop="planPickupTime" label="计划取件时间" width="200"></el-table-column>
        <el-table-column prop="completeTime" label="完成时间" width="200"></el-table-column>
      </el-table>
      <div style="height: 50px;margin-bottom: 10px">
        <!-- 分页组件 -->
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :page-size="pageSize"
          :current-page="currentPage4"
          :page-sizes='[10, 20, 30, 40]'
          :total="expressList.length"
          layout="total, prev, pager, next, sizes,jumper"
          style="text-align: center; font-size: 6px; margin-top: 15px"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>

import { Getinfo_to } from '@/api/logistics/EDOM_to.js'
import user from  '@/store/modules/user'
import { handleAllProvinces, handleCityChange, handleProvinceChange } from '@/api/order/order'
export default {
  //页面加载方法
  created() {
    //查询所有省份
    handleAllProvinces().then(response =>{
      this.receiverprovinces = response;
      this.senderprovinces = response;
    })

    Getinfo_to(user.state.id).then(res=>{
      res.data.forEach(item=>{
        if(item.status===this.status){
          this.expressList.push(item)
        }
      })
      this.expressList_to=res.data
    })
  },
  data() {
    return {
      selectedPickupTasks: [],// 存储选中的行
      selectedCourier: '', // 存储选中的快递员值

      senderprovinces: [],//发件人省份下拉框
      sendercities: [],//发件人城市下拉框
      senderdistricts: [],//发件人区县下拉框
      OrderDto: {//订单查询条件
        id: '',//订单id查询条件
        status : '',//订单状态查询条件
        paymentStatus: '',//付费状态查询条件
        senderName: '',//发件人姓名查询条件
        senderPhone: '',//发件人电话查询条件
        senderProvinceId: '',//发件人省份查询条件
        senderCityId: '',//发件人城市查询条件
        senderDistrictId: '',//发件人区县查询条件
        receiverName: '',//收件人姓名查询条件
        receiverPhone: '',//收件人电话查询条件
        receiverProvinceId: '',//收件人省份查询条件
        receiverCityId: '',//收件人城市查询条件
        receiverDistrictId: '',//收件人区县查询条件
      },
      modalVisible: false,
      selectedPickupTaskNumbers: [],
      selectedRows: [], // 存储选中的行数据
      status: '取件任务',
      colorMap: {
        '取件任务': 'blue',
        '派件任务': 'black',
        '已取消': 'black'
      },
      formData: {
        trackingNumber: '',
        courierName: '',
        address: [],
        statusRemark: '',
        senderName: '',
        status: ''
      },
      pageSize: 10,
      expressList: [],
      expressList_to: [],
      currentPage: 1,
      allocation1: {
        userid:user.state.id,
        pickupTaskNumber:'',
        address: '',
      },
      Task_pickup_dispatch : {
      id: '',
      order_id: '',
      task_type: '',
      status: '',
      sign_status: '',
      agency_id: '',
      courier_id: '',
      estimated_start_time: '',
      actual_start_time: '',
      estimated_end_time: '',
      actual_end_time: '',
      confirm_time: '',
      cancel_time: '',
      assigned_status: '',
      mark: '',
      create_time: ''
      }
    }
  },
  methods: {

    //查询发件人城市
    async handleSenderProvinceChange(value) {

      if (!value) {
        this.OrderDto.senderCityId = '';
        this.OrderDto.senderDistrictId = '';
        this.senderdistricts=[];
        console.log("发件人城市id====" + value);

      }
      //调用根据省份id查城市
      handleProvinceChange(value).then(response =>{
        this.sendercities = response
      })
    },
    //查询发件人区县
    async handleSenderCityChange(value) {
      if (!value) {
        this.OrderDto.senderDistrictId = '';
        this.senderdistricts=[];
      }
      //调用根据城市id查区县
      handleCityChange(value).then(response =>{
        this.senderdistricts = response
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
    //  console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage = val
    //  console.log(`当前页: ${val}`)
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    //分配快递员
    allocation(){
      const selectedPickupTasks = this.selectedRows.map(row => row);
      console.log(selectedPickupTasks)

      if (selectedPickupTasks.length === 0) {
        alert("请选择要完成的快递！");
        return;
      }
      UpdateCourierStatus(selectedPickupTasks).then(res => {
        alert(res.message);
      });

      this.selectedPickupTasks=selectedPickupTasks
      this.modalVisible = true;

      console.log(selectedPickupTasks); // 在控制台打印选中行的所有数据
    },
    //清空
    resetValues(){
      this.formData={
        trackingNumber: '',
        courierName: '',
        address: [],
        statusRemark: '',
        senderName: '',
        status: ''
      }
    },
    //条件查询
    query(){
      this.expressList=[]
      this.currentPage=1;
      let myBool = false;
      // 遍历 formData 对象的属性
      for (const key in this.formData) {
          if (this.formData[key].length > 0) {
            myBool=true
            break;
          }
      }
      if(myBool===true){
        for (const key in this.formData) {
          this.parseNonEmptyData(key, this.formData[key]);
        }
      }else{
        // 为空的情况
        this.expressList_to.forEach(item=>{
          if(item.status===this.status){
            this.expressList.push(item)
          }
        })
      }

    },
    parseNonEmptyData(fieldName, data) {
      // 执行解析判断的逻辑，此处为示例代码
      if(data !=='') {
        console.log(this.expressList)
        this.expressList_to.forEach(item => {
          if (item[fieldName] === data) {
            this.expressList.push(item)
          }
        })
      }
    },
    changeColor(status) {
      this.status=status
      this.expressList=[];
      for (const key in this.colorMap) {
        if (key === status) {
          this.$set(this.colorMap, key, 'blue')
        } else {
          this.$set(this.colorMap, key, 'black')
        }
      }
      this.expressList_to.forEach(item=>{
        if(item.status===this.status){
          this.expressList.push(item)
        }
      })
    }
  }
}
</script>

<style>
.table-container {
  overflow-x: auto;
}
</style>
